<script>
    import { h } from 'vue'
    export default {
        name: 'XtxBread',
        render() {
            // 用法
            // 1.template标签去除，单文件组件
            // 2.返回值就是组件内容
            // 3.vue2.0的 h 函数是传单进来的,vue3.0的h函数是导入的
            // 4.h函数 第一个参数 : 标签名字
            //        第二个参数 : 标签属性对象 
            //        第三个参数 : 子节点
            const slotsList = this.$slots.default()
            const dymanicItems = []
            slotsList.forEach((slot, sIndex) => {
                dymanicItems.push(slot)
                if (sIndex < slotsList.length - 1) {
                    dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' }))
                }
            });
            return h('div', { class: 'xtx-bread' }, dymanicItems)

        }
    }
</script>

<style scoped lang='less'>
    .xtx-bread {
        display: flex;
        padding: 25px 10px;
    }
</style>